<template>
    <div class="page">
        <div class="wrap">
            <GlobalLayout @tab="onTab" />
            <div class="head">
                <div class="content">
                    <img src="@/assets/img_logos.png" class="logo">
                    <div class="nav">
                        <a @click="onTab(1)">查询商标</a>
                        <a @click="onTab(2)">查注册号</a>
                        <a @click="onTab(3)">查申请人</a>
                        <a @click="onTab(4)">查类别</a>
                        <a @click="onTab(5)">商标注册<img src="@/assets/icon_hot.png" tppabs="images/icon_hot.png"
                                class="hot"></a>
                    </div>
                    <div class="search">
                        <input v-model="form.name" type="text" class="input" placeholder="请输入商标名称">
                        <a class="btn" data-agl-cvt="5" @click="show3 = true">查一下</a>
                    </div>
                    <p>已为用户提供 <span>4942392</span> 次商标查询服务</p>
                </div>
            </div>
            <div class="operate">
                <a class="get" @click="show = true">
                    <img src="@/assets/icon_red.png" tppabs="images/icon_red.png">
                    <span>免费获取行业注册方案</span>
                </a>
                <a class="down" @click="show2 = true">
                    <img src="@/assets/icon_blue.png" tppabs="images/icon_blue.png">
                    <span>尼斯分类表下载</span>
                </a>
            </div>
        </div>
        <div class="mask maskSuccess" v-if="success">
            <div class="box">
                <img src="@/assets/img_close.png" tppabs="images/img_close.png" class="close"
                    @click="success = false" />
                <h2><img src="@/assets/img_right.png" tppabs="images/img_right.png" />提交成功</h2>
                <div class="txt">本系统已收到您的信息，请保持电话畅通</div>
                <a class="sure" @click="onSuccess">确 定</a>
                <h5>知识产权信息服务平台 - 商标查询系统</h5>
            </div>
        </div>
        <GlobalFooter />
        <Modal1 ref="hy" v-if="show" :isVer="isVer" @submit="onSubmit" @close="show = false" />
        <Modal2 ref="down" :isVer="isVer" v-if="show2" @submit="onSubmit" @close="show2 = false" />
        <Modal3 ref="zc" v-if="show3" :name="form.name" :isVer="isVer" @submit="onSubmit" @close="show3 = false" />
    </div>
</template>

<script setup>
import GlobalLayout from '@/layout/GlobalLayout.vue'
import GlobalFooter from '@/layout/GlobalFooter.vue'
import Modal1 from '@/components/modal/Modal1.vue'
import Modal2 from '@/components/modal/Modal2.vue'
import Modal3 from '@/components/modal/Modal3.vue'

import { onMounted, ref } from 'vue'
import { saveCustomer, isVerification, yiDunProtector } from '@/api/customer'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()
const show = ref(false)
const show2 = ref(false)
const show3 = ref(false)
const success = ref(false)
const isVer = ref(false)
const dunData = ref({})
const dunToken = ref('')
const form = ref({
    name: '',
    phone: '',
    company: 'ls',
    code: '',
    type: '1',
    search_keywords: '',
    first_url: '',
    qhclickid: '',
    baidu_logid_url: ''
})

const getParams = async () => {
    const firstUrl = window.location.href
    form.value.first_url = firstUrl
    const cleanQueryString = firstUrl.replace(/&amp;/g, '&')
    const urlParams = new URLSearchParams(window.location.search);
    const params = {};

    for (const [key, value] of urlParams.entries()) {
        // 移除参数名和值中的空格
        const trimmedKey = key.replace(/\s+/g, '');  // 移除参数名中的空格
        const trimmedValue = value.replace(/\s+/g, '');  // 移除值中的空格
        params[trimmedKey] = trimmedValue;
    }
    form.value.words = params.words
    form.value.first_url = firstUrl
    if (params.bd_vid) {
        form.value.baidu_logid_url = cleanQueryString
    }
    if (params.qhclickid) {
        form.value.qhclickid = params.qhclickid
    }
    console.log('---------', form.value)
}
getParams()

const getVerification = () => {
    isVerification(form.value).then(res => {
        isVer.value = res.data.on_sms
    })
}
getVerification()

const onSubmit = async (formData) => {
    form.value.search_keywords = route.query.words;
    form.value.name = formData.name || ''
    form.value.phone = formData.phone
    form.value.code = formData.code
    await getWyDunToken()
    form.value.wy_dun_token = dunToken.value
    form.value.sceneData = [{ verifyType: "upLinkSMS" }]
    if (form.value.phone === '') {
        ElMessage.error('请输入手机号')
        return false
    }
    try {
        const res = await saveCustomer(form.value)
        if (res.code === 0) {
            success.value = true
            show.value = false
            show2.value = false
            show3.value = false
            form.value = {
                name: '',
                phone: '',
                company: 'ls',
                code: '',
                type: '1'
            }
            window._agl && window._agl.push(['track', ['success', { t: 3 }]])
        }
    } catch (error) {
        console.error('提交失败:', error);
    }
    getParams()
}
const onSuccess = () => {
    window._agl && window._agl.push(['track', ['success', { t: 3 }]])
    success.value = false
}

const onTab = (e) => {
    router.push({ path: '/category', query: { ...route.query, cat: e } })
}

const getWyDun = async (data) => {
    const res = await yiDunProtector(data)
    dunData.value = res.data
    console.log(res)
    if (res.data.risk_level === 2 || res.data.risk_level === 3) {
        window.location.href = 'http://p99.biaofw.com/'
    }
}

const getWyDunToken = async () => {
    const neg = createNEGuardian({ productId: 'YD00973669355806', timeout: 6000 })
    const token = await neg.getToken()
    dunToken.value = token.token
}

onMounted(async () => {
    await getWyDunToken()
    await getWyDun({ token: dunToken.value, sceneData: [{ verifyType: 'upLinkSMS' }] })
})
</script>

<style lang="scss">
.foot {
    position: fixed;
    left: 0;
    width: 100%;
    bottom: 0;
}

.head .content .logo {
    margin-top: 115px;
    margin-bottom: 44px;
    width: initial;
}

.head .content .search {
    margin-top: 23px;
}

.head .content p {
    line-height: 50px;
}

.operate {
    border: none;
}
</style>